import { useState } from "react"

interface ColorPickProps{ 
    onChange:  (color:string)=> any
    defaultColor?: string ;
    color?: string ;
}
export  const ColorPick = ({onChange , color , defaultColor} : ColorPickProps)=> {
   const [pickedColor , setColor] = useState(color|| defaultColor)  
   function updateColor(e:React.ChangeEvent<HTMLInputElement>) {
    const color =e.target.value ; 
    setColor(color);
    onChange(color)
   }
   return <div className='row between color-wrap'>
                 <span >{pickedColor}</span> 
                 {color?
                  <input   value={color } onChange={updateColor} type="color" className='color-input' />
                :
                <input  defaultValue={defaultColor}  onChange={updateColor} type="color" className='color-input' />

                }
            </div>
}